<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="../../styles/common.css" />
		<link rel="stylesheet" href="../../styles/page.css" />
		<style>
			#member-app .notAdmin::after {
				border: 0 !important;

			}
		</style>
	</head>
	<body>
	
		<div class="dashboard-container" id="member-app">
				<img src="../../images/queryHeaderPic.png" alt="" style="border: 3px solid white;">
			<div class="container">
				<div class="tableBar">
					
					<el-form :inline="true" :model="form" class="demo-form-inline">
						<el-form-item label="航班号">
							<el-input v-model="form.id" placeholder="请输入航班号" @input="fetchData"></el-input>
						</el-form-item>
						<el-form-item label="起始站">
							<el-input v-model="form.startStation" placeholder="请输入起始站"></el-input>
						</el-form-item>
						<el-form-item label="终点站">
							<el-input v-model="form.endStation" placeholder="请输入终点站"></el-input>
						</el-form-item>
						<el-form-item label="航班时间">
							<template>
								<div class="block">

									<el-date-picker v-model="dateTime" type="datetimerange" range-separator="-"
										start-placeholder="航班起飞时间" end-placeholder="航班降落时间">
									</el-date-picker>
								</div>
							</template>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">查询</el-button>
						</el-form-item>
					</el-form>


					<!-- <el-button
          type="primary"
          @click="addMemberHandle('add')"
        >
          + 添加员工
        </el-button> -->
				</div>
				<el-table :data="tableData" stripe class="tableBox">
					<el-table-column prop="cfno" label="航班号"></el-table-column>
					<el-table-column prop="awcd" label="航空公司" align="center"></el-table-column>
					<el-table-column prop="star" label="起始站"></el-table-column>
					<el-table-column prop="ends" label="终点站"></el-table-column>
					<el-table-column prop="tables" label="值班柜台"></el-table-column>
					<el-table-column prop="startime" align="center" label="起飞时间" width="180px"></el-table-column>
					<el-table-column prop="endtime" align="center" label="到达时间" width="180px"></el-table-column>
					<el-table-column
					      prop="delay"
						  width="130px"
					      label="航班状态"
					      width="100"
					      :filters="[{text: '正常', value: '正常'}, { text: '延迟', value: '延迟'},{ text: '取消', value: '取消' }]"
					      
					      filter-placement="bottom-end">
					      <template slot-scope="scope">
					        <el-tag
					          :type="isType(scope.row)"
					          disable-transitions>{{isFlag(scope.row)}}</el-tag>
					      </template>
					    </el-table-column>
					<el-table-column label="操作" width="160" align="center" v-if="user === 'cheydev'">
						<template slot-scope="scope">
							<el-button type="text" size="small" class="blueBug" @click="addMemberHandle(scope.row)"
								:class="{notAdmin:user !== 'admin'}">
								购票
							</el-button>
							<!-- <el-button type="text" size="small" class="delBut non" @click="statusHandle(scope.row)"
								v-if="user === 'admin'">
								{{ scope.row.status == '1' ? '禁用' : '启用' }}
							</el-button> -->
							
							<el-button type="text" size="small" class="blueBug" @click="detail(scope.row)"
								:class="{notAdmin:user !== 'admin'}">
								详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				
				<el-pagination class="pageList" :page-sizes="[5,10,15,20]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"
					@size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
			</div>
			
			<el-dialog title="航班中转信息" :visible.sync="dialogTableVisible">
			  <el-table :data="gridData">
			    <el-table-column property="cfno" label="航班号" align="center"></el-table-column>
			    <el-table-column property="fplt" label="到达时间" align="center" width="95px"></el-table-column>
			    <el-table-column property="apcd" label="中转站" align="center"></el-table-column>
				<el-table-column property="fptt" label="起飞时间" align="center"  width="95px"></el-table-column>
			  </el-table>
			</el-dialog>
			
			<el-dialog title="购票" :visible.sync="dialogTicketVisible"  top='0px'
			>
			 	<div id="ticket" style="width: 700px; height: 500px; transform: translateX(-320px);"></div>
			</el-dialog>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="../../plugins/vue/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="../../plugins/element-ui/index.js"></script>
		<!-- 引入axios -->
		<script src="../../plugins/axios/axios.min.js"></script>
		<script src="../../js/request.js"></script>
		<script src="../../api/member.js"></script>
		<script src="../../plugins/echarts.js"></script>
		<script src="../../plugins/jquery-3.6.4.min.js"></script>
		<script>
			new Vue({
				el: '#member-app',
				data() {
					return {
						user: '',
						input: '',
						counts: 0,
						page: 5,
						pageSize: 5,
						tableData: [],
						id: '',
						status: '',
						dateTime: [],
						form: {
							id: '',
							startStation: '',
							endStation: '',
							startTime: '',
							endTime: '',
							status: ''
						},
						gridData: [],
						dialogTableVisible: false,
						dialogTicketVisible: false
						
					}
				},
				computed: {
					
					}
					
				,
				created() {
					this.init()
					
					if (sessionStorage.getItem('userInfo') != null) {
						//获取当前登录员工的账号，并赋值给模型数据user
						var userInfo = sessionStorage.getItem("userInfo");
						 userInfo=JSON.parse(userInfo)
						this.user=userInfo[0].username;
						
						
					}
				},
				
				mounted() {
					
					
					
				},
				methods: {
					
					
					async init() {
						
						
					
						const params = {
							page: this.page,
							pageSize: this.pageSize,
							input: JSON.stringify(this.form)
						}
						await getFlightList(params).then(res => {
							console.log(res)
							if (String(res.code) === '200') {
								for (var i = 0; i < res.data.data.length; i++) {
									var timeString = res.data.data[i].startime;
									var year = timeString.substring(0, 4);
									var month = timeString.substring(4, 6);
									var day = timeString.substring(6, 8);
									var hour = timeString.substring(8, 10);
									var minute = timeString.substring(10, 12);
									var second = timeString.substring(12, 14);

									var formatStartTime = year + "-" + month + "-" + day + " " + hour + ":" +
										minute +
										":" + second;
									res.data.data[i].startime = formatStartTime

									var timeString = res.data.data[i].endtime;
									var year = timeString.substring(0, 4);
									var month = timeString.substring(4, 6);
									var day = timeString.substring(6, 8);
									var hour = timeString.substring(8, 10);
									var minute = timeString.substring(10, 12);
									var second = timeString.substring(12, 14);

									var formatEndTime = year + "-" + month + "-" + day + " " + hour + ":" +
										minute +
										":" + second;
									res.data.data[i].endtime = formatEndTime
									
									if(res.data.data[i].fett != null){
									var timeString = res.data.data[i].fett;
									var year = timeString.substring(0, 4);
									var month = timeString.substring(4, 6);
									var day = timeString.substring(6, 8);
									var hour = timeString.substring(8, 10);
									var minute = timeString.substring(10, 12);
									var second = timeString.substring(12, 14);
																
									var formatEndTime = hour + ":" +
										minute +
										":" + second;
									res.data.data[i].fett = formatEndTime
									
								}
								}

								console.log(res)
								this.tableData = res.data.data || []
								this.counts = res.data.total
								
							}
						}).catch(err => {
							this.$message.error('请求出错了：' + err)
						})
					},
					onSubmit() {
						var formattedDate=[];
						for (var i = 0; i < this.dateTime.length; i++) {
						var dateObj = new Date(this.dateTime[i])
						var year = dateObj.getFullYear();
						var month = ("0" + (dateObj.getMonth() + 1)).slice(-2);
						var day = ("0" + dateObj.getDate()).slice(-2);
						var hours = ("0" + dateObj.getHours()).slice(-2);
						var minutes = ("0" + dateObj.getMinutes()).slice(-2);
						var seconds = ("0" + dateObj.getSeconds()).slice(-2);
						
						 formattedDate[i] = year + month + day + hours + minutes + seconds;
						}
						this.form.startTime=formattedDate[0]
						this.form.endTime=formattedDate[1]
						this.form.status='1';

						console.log(this.form);
						// console.log(JSON.stringify(this.form))

						this.init();
					},
					handleQuery() {
						this.page = 1;
						this.init();
					},
					// // 添加
					 addMemberHandle(st) {
						 this.$message.success("欢迎购票")
						 this.dialogTicketVisible = true;
						 
						 
						 this.$nextTick(() => {
						      
						 	 
						 	 
						 	 var chartDom = document.getElementById('ticket');
						 	 var myChart = echarts.init(chartDom);
						 	 var option;
						 	 
						 	 $.get('../../images/flight-seats.svg', function (svg) {
						 	   echarts.registerMap('flight-seats', { svg: svg });
						 	   const takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];
						 	   option = {
								
						 	     tooltip: {},
						 	     geo: {
						 	       map: 'flight-seats',
						 	       roam: true,
						 	       selectedMode: 'multiple',
						 	       layoutCenter: ['50%', '50%'],
						 	       layoutSize: '95%',
						 	       tooltip: {
						 	         show: true
						 	       },
						 	       itemStyle: {
						 	         color: '#fff'
						 	       },
						 	       emphasis: {
						 	         itemStyle: {
						 	           color: undefined,
						 	           borderColor: 'green',
						 	           borderWidth: 2
						 	         },
						 	         label: {
						 	           show: false
						 	         }
						 	       },
						 	       select: {
						 	         itemStyle: {
						 	           color: 'green'
						 	         },
						 	         label: {
						 	           show: false,
						 	           textBorderColor: '#fff',
						 	           textBorderWidth: 2
						 	         }
						 	       },
						 	       regions: makeTakenRegions(takenSeatNames)
						 	     },
								 width: '200px',
								 height: '720px'
						 	   };
						 	   function makeTakenRegions(takenSeatNames) {
						 	     var regions = [];
						 	     for (var i = 0; i < takenSeatNames.length; i++) {
						 	       regions.push({
						 	         name: takenSeatNames[i],
						 	         silent: true,
						 	         itemStyle: {
						 	           color: '#bf0e08'
						 	         },
						 	         emphasis: {
						 	           itemStyle: {
						 	             borderColor: '#aaa',
						 	             borderWidth: 1
						 	           }
						 	         },
						 	         select: {
						 	           itemStyle: {
						 	             color: '#bf0e08'
						 	           }
						 	         }
						 	       });
						 	     }
						 	     return regions;
						 	   }
						 	   myChart.setOption(option);
						 	   // Get selected seats.
						 	   myChart.on('geoselectchanged', function (params) {
						 	     const selectedNames = params.allSelected[0].name.slice();
						 	     // Remove taken seats.
						 	     for (var i = selectedNames.length - 1; i >= 0; i--) {
						 	       if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
						 	         selectedNames.splice(i, 1);
						 	       }
						 	     }
						 	     console.log('selected', selectedNames);
						 	   });
						 	 });
						 	 
						 	 option && myChart.setOption(option);
						 
						 	 
						 	 
						     });	
					 },
					
					handleSizeChange(val) {
						this.pageSize = val
						this.init()
					},
					fetchData(){ //实现随时输入随时显示的功能
						this.form.status='1';
						console.log(this.form.id)
						this.init();
					},
					isType(row){
						if(row.delay ==='DLY'){
							return "warning"
							
						}else if(row.cane ==='CAN'){
							return "danger"
						}else{
							return "success"
						}
					},
					  isFlag(row){
						if(row.delay ==='DLY'){
							
							
							
							return "起飞延误 "+(row.fett==='::'? '': row.fett);
							
						}else if(row.cane ==='CAN'){
							return "航班取消"
						}else{
							return "航班正常"
						}
						},
					handleCurrentChange(val) {
						this.page = val
						this.init()
					},
					detail(row){
						this.dialogTableVisible = true
						console.log(row)
						
						var params={
							cfno: row.cfno,
							flid: row.flid
							
						}
						detail(params).then(res => {
							console.log(res.data)
							this.gridData=[]
							if(res.data!= null){
							for (var i = 0; i < res.data.length; i++) {
								var timeString = res.data[i].fptt;
								var year = timeString.substring(0, 4);
								var month = timeString.substring(4, 6);
								var day = timeString.substring(6, 8);
								var hour = timeString.substring(8, 10);
								var minute = timeString.substring(10, 12);
								var second = timeString.substring(12, 14);
							
								var formatStartTime = year + "-" + month + "-" + day + " " + hour + ":" +
									minute +
									":" + second;
								res.data[i].fptt = formatStartTime
							
								var timeString = res.data[i].fplt;
								var year = timeString.substring(0, 4);
								var month = timeString.substring(4, 6);
								var day = timeString.substring(6, 8);
								var hour = timeString.substring(8, 10);
								var minute = timeString.substring(10, 12);
								var second = timeString.substring(12, 14);
							
								var formatEndTime = year + "-" + month + "-" + day + " " + hour + ":" +
									minute +
									":" + second;
								res.data[i].fplt = formatEndTime
								
								
									
									
								
							}
							
							
							
							this.gridData = res.data
							}
						}).catch(err => {
							this.$message.error('请求出错了：' + err)
						})
						
					}
				}
			})
		</script>
	</body>
</html>
